<template>
  <div id="user-content" v-if="Object.keys(userContents).length !==0">
    
    <div class="users">
      <div class="user-evaluation">用户评价</div>
      <div class="more">更多<i></i></div>
      
    </div>
    <div class="userimg">
      <img :src="createimg" alt="" class="topimg">
      <span>{{createname}}</span>
    </div>
    <div class="user-contents">
      <p>{{createcontent}}</p>
      <div class="content-other">
        <span>{{showDate(userContents.rate.list[0].created)}}</span>
        <span>{{userContents.rate.list[0].style}}</span>
      </div>
      <div class="content-img">
        <img :src="item" alt="" v-for="(item,index) in userContents.rate.list[0].images" :key="index">
      </div>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
import {formatDate} from "../../../utils/utils";
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      userContents:{
        type: Object,
        default(){
          return {}
        }
      }
    },
    data() {
    //这里存放数据
      return {

      };
    },
    //计算属性 类似于data概念
    computed: {
      createimg(){
        
        return this.userContents.rate.list[0].user.avatar;
      },
      createname(){
        return this.userContents.rate.list[0].user.uname;
      },
      createcontent(){
        return this.userContents.rate.list[0].content;
      },
      
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      showDate(value){
        let date = new Date(value*1000);
        return formatDate(date, 'yyyy-MM-dd');
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
#user-content{
  border-top: 0.1875rem solid #f2f5f8;
  padding: 0.3125rem 0.9375rem;
}
.users{
  width: 100%;
  height: 3.125rem;
/* border: 1px solid #000;
  */
  line-height: 3.125rem;
  border-bottom: 0.125rem solid #f2f5f8;
}
.user-evaluation{
  float: left;
}
.more{
  margin-right: 1.25rem;
}
.users i,.more{
  float: right;
}
.users i::after{
  content: '';
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #BBBBBB;
  border-right: 0.125rem solid #BBBBBB;
  transform: rotate(45deg);
}
.users i{
  position: relative;
  left: 0.125rem;
  top: -0.0.3125rem;
}
.userimg{
  width: 100%;
  padding: 0.625rem 0;
}
.topimg{
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
}
.userimg span{
  position: relative;
  top: -0.9375rem;
  left: 0.625rem;
}
.user-contents p{
  font-size: 0.875rem;
  color: #777;
  line-height: 1.5;
}
.content-other{
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: #999;
}
.content-other span:first-child{
  margin-right: 0.5rem;
}
.content-img{
  width: 100%;
}
.content-img img{
  width: 4.375rem;
  height: 4.375rem;
  margin-right: 0.3125rem;
}

</style>